<template>
  <div>
    App...插槽使用
    <p>插槽默认使用</p>
    <A>
      <p>{{ count }}</p>
      <button @click="count++">按钮</button>
    </A>
    <p>命名插槽</p>
    <B>
      <template v-slot:header>
        <header>BBB的header</header>
      </template>
      <template>
        <section>BBB的sectoion</section>
      </template>
      <template #footer>
        <header>BBB的footer</header>
      </template>
    </B>
    <p>作用域插槽,接收的是一个对象，子给父传递</p>
    <C>
      <template v-slot='{userName,age}'>
        <header>{{userName}}</header>
        <p>{{age}}</p>
      </template>
    </C>
  </div>
</template>

<script>
import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";
export default {
  name: "App",
  components: {
    A,
    B,
    C,
  },
  data() {
    return {
      count: 0,
    };
  },
};
</script>

<style>
</style>